<template>
	<uni-popup ref="popup" type="bottom" :animation="true" backgroundColor="#fff" borderRadius="20rpx 20rpx 0 0"
	 :safe-area="false" @maskClick="closePopup">
		<view class="popup-content-box" v-if="isNextStep">
			<view class="header-title">
				<text>选择绑定环线</text>
				<uni-icons @click="closePopup" type="close" size="25"></uni-icons>
			</view>
			<view class="content-box">
				<scroll-view scroll-y="true" class="SelectLoop-box">
					<radio-group @change="LoophandleChange" class="radio">
						<view v-for="(item, index) in LoopData" :key="index" class="radio-item">
							<text class="radio-label">{{ item.loop_name }}</text>
							<radio :value="item.loop_id" :checked="selectedLoopId == item.loop_id" 
							class="radio-button" color="#000"></radio>
						</view>
					</radio-group>
				</scroll-view>
			</view>
			<view class="footer-button" @click="NextStep">
				<text>下一步</text>
			</view>
		</view>
		<view class="Loop-shop-box popup-content-box" v-else>
			<view class="header-title reason-title">
				<uni-icons @click="backPopup" type="arrow-left" size="25"></uni-icons>
				<text>选择绑定环线商品</text>
				<uni-icons @click="closePopup" type="close" size="25"></uni-icons>
			</view>
			<view class="Shop-content-box">
				<scroll-view scroll-y="true" class="SelectLoop-scroll">
					<selectShopCardVue class="SelectShop-box" :ShopDatas="LoopShops" 
					@shopSelected="handleShopSelected"></selectShopCardVue>
				</scroll-view>
			</view>
			<view class="footer-button" @click="Submit">
				<text>提交审核</text>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {ref,defineExpose,defineProps,watch} from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getLoop } from '@/config/API/home.js';
	import { GetTripshopList } from '@/config/API/ProductDetails.js'
	import selectShopCardVue from './selectShopCard.vue';
	import {PostShareMyCommit} from '@/config/API/commit';
	const popup = ref(null);
	const emit = defineEmits();
	const isNextStep = ref(true)
	const LoopData = ref([]);
	const selectedLoopId = ref()
	const LoopShops = ref([])
	const allDataFrom = ref({
		trip_blog_title: '',
		trip_blog_content: '',
		Trip_blog_shop_id: 0, // 绑定的商品
		community_trip_loop: 0, // 绑定环线
		img_list: ''
	})
	// 接收父组件传递的 ContentForm 数据
	const props = defineProps({
		contentForm: Object
	});
	// 监视 ContentForm 数据变化
	watch(() => props.contentForm, (newVal) => {
		allDataFrom.value.trip_blog_title = newVal.trip_blog_title;
		allDataFrom.value.trip_blog_content = newVal.trip_blog_content;
		allDataFrom.value.img_list = newVal.img_list;
		// console.log(props.contentForm);
		// console.log('ContentForm 数据更新：', newVal);
	}, { deep: true });
	
	onLoad(async () => {
		const getLoopData = await getLoop();
		LoopData.value = getLoopData.data;
		console.log('发布图库获取所有环线: ', LoopData.value);
	});
	// 打开弹窗
	const openPopup = () => {
		if (popup.value) {
			emit('openPopup');
			popup.value.open();
		}
	};

	// 关闭弹窗
	const closePopup = () => {
		if (popup.value) {
			emit('closePopup');
			popup.value.close(); 
		}
	};
	// 返回上一个弹窗内容 
	const backPopup = () =>{
		console.log('返回上一个弹窗内容',selectedLoopId.value);
		isNextStep.value = true
	}

	// 选择的环线
	const LoophandleChange = (e) => {
		console.log("选择的环线ID：",e.detail.value);
		selectedLoopId.value = e.detail.value;
	};
	// 点击下一步获取环线商品数据 
	const NextStep = async () => {
		if (!selectedLoopId.value) {
			uni.showToast({
				title: '请选择绑定环线',
				icon: 'none'
			});
			return;  // 在没有选择环线时阻止继续执行
		}
		try {
			const resLoopShop = await GetTripshopList(selectedLoopId.value);
			LoopShops.value = resLoopShop.data;
			console.log('环线对应的商品数据', LoopShops.value);
			isNextStep.value = false;
		} catch (e) {
			console.log(e);
			uni.showToast({
				title: '数据错误请稍后再试',
				icon: 'none'
			});
		}
	};
	// 处理商品选择事件
	const handleShopSelected = (selectedShopId) => {
		// 更新 Trip_blog_shop_id
		allDataFrom.value.Trip_blog_shop_id = parseInt(selectedShopId);
		console.log('更新后的商品ID:', allDataFrom.value.Trip_blog_shop_id);
	};

	let isSubmitting = false; // 防抖标志
	// 如果正在提交，直接返回，避免重复提交
	const Submit = async () => {
		if (isSubmitting) {
			return;
		}
		// 设置防抖标志为 true
		isSubmitting = true;
		// 确保已选择商品
		if (!allDataFrom.value.Trip_blog_shop_id) {
			uni.showToast({
				title: '请选择绑定商品',
				icon: 'none'
			});
				isSubmitting = false; // 提交失败时恢复标志
				return;
		}
		// 填充 allDataFrom 数据
		allDataFrom.value.community_trip_loop = parseInt(selectedLoopId.value);
		console.log('提交的表单数据', allDataFrom.value);
		try {
			uni.showLoading({
				title: '正在发布'
			});
			// 模拟延迟
			await new Promise(resolve => setTimeout(resolve, 1000));
			// 提交数据
			const shareMydata = await PostShareMyCommit(allDataFrom.value);
			console.log('发布结果', shareMydata);
			if(shareMydata.code==200){
				uni.showToast({
					title: '发布成功 等待审核',
					icon: "none",
					duration: 1500
				});
				// 延迟后再跳转
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}else{
				uni.showToast({
					title: '发布失败，请稍后再试',
					icon: "none",
					duration: 2000
				});
			}
		} catch (error) {
			console.error('发布失败', error);
			uni.showToast({
				title: '发布失败，请稍后再试',
				icon: "none",
				duration: 2000
			});
		} finally {
			// 在提交完成后，恢复防抖标志
			uni.hideLoading();
			isSubmitting = false;
		}
	};
	// 向父组件暴露的方法
	defineExpose({
		openPopup,
		closePopup
	});
</script>

<style lang="scss" scoped>
	.popup-content-box {
		width: 100%;
		height: 80vh;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: 60rpx;
		.header-title{
			padding: 0rpx 0 20rpx 0;
			border-bottom: 2rpx solid #f5f6f7;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text{
				display: block;
				width: calc(100% - 100rpx);
				height: 100%;
				font-size: 30rpx;
				text-align: center;
				font-weight: 600;
			}
		}
		.content-box{
			width: 100%;
			height: 70vh;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			.SelectLoop-box {
				height: 70vh;
				width: 100%;
				padding: 24rpx 24rpx 115rpx;
				box-sizing: border-box;
				.radio{
					width: 100%;
					display: flex;
					gap: 26rpx;
					flex-direction: column;
					.radio-item {
						display: flex;
						align-items: center;
						justify-content: space-between; 
						.radio-label {
							font-size: 28rpx;
							color: #333;
						}
						.radio-button {
							transform:scale(0.9)
						}
					}
				}	
			}
		}
		.footer-button{ 
			width: 80vw;
			height: 80rpx;
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #000;
			border-radius: 60rpx;
			transform: translate(-50%, 0%);
			text{
				font-size: 26rpx;
				color: #fff;
			}
		}
	}
	.Loop-shop-box{
		width: 100%;
		height: 80vh;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: 60rpx;
		.reason-title{
			padding: 0rpx 0 20rpx 0;
			border-bottom: 2rpx solid #f5f6f7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				font-size: 30rpx;
				text-align: center;
				font-weight: 600;
			}
		}
		.Shop-content-box{
			width: 100%;
			height: 70vh;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			.SelectLoop-scroll{
				height: 70vh;
				width: 100%;
				padding: 24rpx 0rpx 115rpx;
				box-sizing: border-box;
				.SelectShop-box{
					width: 100%;
					display: flex;
					flex-direction: column;
					gap: 30rpx;
				}
			}
		}
	}

</style>
